<div id="mainContent" class="easyui-layout" data-options="fit:true">
<div data-options="region:'north'" style="overflow: hidden;height: 150px;">
        <div class="easyui-panel" data-options="footer:'#footerBtn',border:0">
        <fieldset style="padding: 10px;margin: 4px; border:1px solid #f0ad4e">
            <legend>新增/更新</legend>
                <form id="rewardFrm" name="rewardFrm" method="POST" enctype="multipart/form-data">
                    <input type="hidden" id="rewardId" name="rewardId"/>
                    <div style="text-align: right">
                        <input id="rewardName" name="rewardName"
                               class="easyui-textbox theme-textbox-radius" label="奖品名称:"
                               data-options="prompt:'请输入奖品名称',required:true" style="width:30%;"/>
                        <input id="rewardPrice"
                               class="easyui-numberbox theme-textbox-radius" label="奖品价值:"
                               data-options="precision:2,prompt:'输入奖品价值',required:true" style="width:20%;"/>
                        <input id="rewardPriceTmp" name="rewardPrice" type="hidden"/>
                        <input id="rewardCount" name="rewardCount"
                               class="easyui-numberspinner theme-textbox-radius" label="数量:"
                               data-options="min:1,required:true" style="width:20%;text-align:center"/>
                    </div>
                    <div style="height: 10px"></div>
                    <div style="text-align: right">
                        <input id="rewardImg"  name="rewardImg"
                               class="easyui-filebox theme-textbox-radius" label="奖品图片:"
                               data-options="prompt:'请选择奖品图片'" style="width:40%;"/>
                        <input id="remarks" name="remarks"
                               class="easyui-textbox theme-textbox-radius" label="备注:"
                               data-options="prompt:'请输入奖品的备注信息',multiline:true" style="width:50%;"/>
                    </div>
                </form>
        </fieldset>
        </div>

        <div id="footerBtn" style="text-align: right;padding-right: 20px;">
            <a id="submitBtn" href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:80px;height:26px;">提交</a>
        </div>
    </div>

    <div data-options="region:'center'">
        <table id="rewardDg" title="" class="easyui-datagrid"
               data-options="
                url: '${base}/admin/reward/dataList.do',
                fit:true,
                lines: true,
                rownumbers: true,
                striped: true,
                animate:true,
                singleSelect : true,
                showFooter: true,
                pagination: true,
                idField: 'rewardId',
                onLoadSuccess: loadSuccess
            " border="0">
            <thead data-options="frozen:true">
            <tr>
                <th data-options="field:'rewardName'" width="12%">奖品名称</th>
                <th data-options="field:'rewardImg',formatter:fmtImage" width="6%">图片</th>
                <th data-options="field:'rewardPrice',formatter:fmtPrice" width="5%">奖品价值</th>
                <th data-options="field:'rewardCount'" width="5%">数量</th>
                <th data-options="field:'rewardSent'" width="5%">已发放</th>
                <th data-options="field:'createTime'" width="15%">创建时间</th>
                <th data-options="field:'remarks'" width="20%">备注</th>
                <th data-options="field:'rewardId',formatter:fmtControl" width="18%">操作</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<script>

    var isAdd = true;

    $(function(){

        $('#submitBtn').bind('click', function () {
            var msg = '新增';
            $('#rewardPriceTmp').val(Math.round($('#rewardPrice').numberbox('getValue') * 100));
            if (isAdd) {
                $('#rewardFrm').attr('action', '${base}/admin/reward/addNew.do')
            } else {
                msg = '更新';
                $('#rewardFrm').attr('action', '${base}/admin/reward/update.do');
            }

            submitFrm('rewardFrm', msg+'奖品信息', 'rewardDg');
            $('#rewardFrm').form('clear');

            isAdd = true;
        });

    });

    function fmtImage(val, row) {
        return '<img src="${base}'+val+'" style="width:32px;height:32px;"/>';
    }

    function fmtPrice(val, row) {
        return (val/100).toFixed(2);
    }

    function fmtControl(val,row) {
        var edit = '<a class="editBtn" href="#">修改</a>';
        var del = '<a class="delBtn" href="#" ">删除</a>';

        return edit + '&nbsp;&nbsp;&nbsp;&nbsp;' + del;
    }
    
    function loadSuccess(data) {

        var dc = $('#mainContent').find('.editBtn, .delBtn');
        if (dc.length < 1) {
            return;
        }

        $(dc).each(function(r, d){
            var index = Math.floor(r/2);
            var cls = $(this).attr('class');
            var reward = data.rows[index];

            if (cls == 'editBtn') {
                $(this).linkbutton({
                    plain: true,
                    iconCls: 'icon-edit',
                    onClick: function () {
                        editReward(reward);
                    }
                });
            } else {
                $(this).linkbutton({
                    plain: true,
                    iconCls: 'icon-remove',
                    onClick: function () {
                        removeReward(reward);
                    }
                });
            }
        });
    }

    function editReward(data) {
        $('#rewardFrm').form('clear');
        $('#rewardFrm').form('load', data);
        $('#rewardPrice').numberbox('setValue', (data.rewardPrice/100).toFixed(2));
        $('#rewardImg').filebox('setValue', data.rewardImg);
        isAdd = false;
    }

    function removeReward(reward) {
        if (reward.rewardSent>0) {
            showMsg('操作失败', '奖品已经在使用中无法删除.');
            return;
        }
        $.post('${base}/admin/reward/delete.do', {rwdId:reward.rewardId}, function (data) {
            if(data.ok) {
                showMsg('操作成功', '删除奖品信息成功');
                $('#rewardDg').datagrid('reload');
            } else {
                showMsg('操作失败', data.msg);
            }
        },'json');
    }
</script>